@import "../font.css";
@import "../_colors.css";
@import "../miniui.css";
@import "../flex.css";

// 设计稿尺寸变量
$design-width: 1920px;
$design-height: 1460px;

// 转换函数：px转vw
@function px2vw($px) {
  @return ($px / $design-width) * 100vw;
}

// 转换函数：px转vh
@function px2vh($px) {
  @return ($px / $design-height) * 100vh;
}

/* 隐藏滚动条但可滚动 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  padding: 0;
  margin: 0;
}
/* 头部区域 */
.bigScreenHeader {
  width: 100%;
  height: px2vh(83px);
  background: url("../../../images/bigSreenHeaderBg.png") no-repeat center
    center;
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  .header-left-box {
    padding-left: px2vw(40px);
    height: 100%;
    img {
      width: px2vw(200px);
      height: px2vh(68px);
      display: block;
    }
    h3 {
      font-size: px2vw(30px);
      color: #fff;
      margin: 0 0 0 px2vw(8px);
      font-family: "YouSheBiaoTiHei";
      font-weight: 300;
    }
  }
  .header-right-box {
    margin-right: px2vw(25px);
    height: 100%;
    .header-right-btn {
      position: absolute;
      right: px2vw(320px);
      top: px2vh(26px);
      a {
        display: block;
        width: px2vw(219px);
        height: px2vh(50px);
        background: url("../../../images/headerBtnBg.png") no-repeat center
          center;
        background-size: 100% 100%;
        text-align: center;
        line-height: px2vh(50px);
        font-size: px2vw(20px);
        text-decoration: none;
        color: #fff;
        &.active {
          background-image: url("../../../images/headerBtnBgActive.png");
          font-weight: 500;
          color: #92fcfd;
        }
      }
    }
    .header-right-time {
      line-height: px2vh(83px);
      font-size: px2vw(20px);
      color: #dee5f8;
      float: right;
    }
  }
}

.bigScreenHeaderDiv {
  height: px2vh(88px);
}
/* 内容区域 */
.contentMain {
  padding: px2vh(36px) px2vw(36px) px2vh(53px);
  .contentBox {
    height: 100%;
    .chunk-box-one {
      .box-one-left {
        width: px2vw(1190px);
        float: left;
      }
      .box-one-right {
        width: px2vw(622px);
        float: right;
      }
    }
    .chunk-box-two {
      .box-two-left {
        width: px2vw(1190px);
        float: left;
        .two-left-one {
          width: px2vw(580px);
          float: left;
        }
        .two-left-two {
          width: px2vw(580px);
          float: right;
        }
      }
      .box-two-right {
        width: px2vw(622px);
        float: right;
      }
    }
  }
}
/* 统一标题 */
.titleBox {
  background: url("../../../images/subTitleBg.png") no-repeat px2vw(34px)
    px2vh(6px);
  background-size: auto 100%;
  height: px2vh(40px);
  line-height: px2vh(32px);
  font-size: px2vw(18px);
  padding-top: px2vh(1px);
  color: #fff;
  img {
    display: block;
    &:first-of-type {
      margin-right: px2vw(13px);
      width: px2vw(22px);
      height: px2vh(24px);
    }
    &:nth-of-type(2) {
      margin-left: px2vw(10px);
      width: px2vw(121px);
      height: px2vh(10px);
    }
  }
}
/* 统一容器边框 */

.gradient-border {
  position: relative;
  border: px2vh(2px) solid transparent;
  border-image: linear-gradient(to bottom, #0082ff, rgba(0, 178, 213, 0.8)) 1;
}
/* 四角小正方形 */
.complete-square {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #ab9f24;
  border: 1px solid #ab9f24;
}

.square-tl {
  top: -4px;
  left: -4px;
}

.square-tr {
  top: -4px;
  right: -4px;
}

.square-bl {
  bottom: -4px;
  left: -4px;
}

.square-br {
  bottom: -4px;
  right: -4px;
}

/* 内容容器 */
.main-container {
  padding: px2vh(15px);
  height: 100%;
  box-sizing: border-box;
  .main-content {
    height: calc(100% - px2vh(40px));
  }
}

.chart-container {
  height: 100%;
}

.h290 {
  height: px2vh(290px);
}
.h185 {
  height: px2vh(185px);
}
.h421 {
  height: px2vh(421px);
}
.h320 {
  height: px2vh(320px);
}
.h286 {
  height: px2vh(286px);
}
.mb {
  margin-bottom: px2vh(28px);
}
.situationBox{
  padding: 0 px2vw(30px);

}
.realTimeOverviewMain {
  box-shadow: inset 0px px2vh(21px) px2vh(50px) 0px rgba(0, 97, 191, 0.35);
  height: px2vh(610px);

  .statisticsListBox {
    // padding-left: px2vw(30px);
    margin-top: px2vh(26px);
    display: flex;
    // flex-wrap: wrap;
    gap: px2vh(20px) px2vw(15px);

    .statisticsItemBox {
      width: 25%;
      // width: calc(25% - px2vw(14px));
      display: flex;
      align-items: center;
      gap: px2vw(4px);
      &:nth-of-type(1) {
        width: 30%;
      }
      &:nth-of-type(2) {
        width: 30%;
      }
      &:nth-of-type(3) {
        width: 30%;
      }

      img {
        width: px2vw(60px);
        height: px2vw(60px);
        display: block;
        flex-shrink: 0;
      }

      .itemText {
        flex: 1;
        .whiteSm {
          font-size: px2vw(18px);
          color: #fff;
          margin-bottom: px2vh(5px);
        }
        .numberText {
          font-size: px2vw(40px);
          span {
            font-size: px2vw(16px);
            color: #fff;
            font-family: '微软雅黑';
            position: relative;
            top: px2vh(2px);
          }
        }
      }
    }
  }
  .windowSituationBox {
    padding-top: px2vh(44px);
    padding-left: px2vw(15px);
    .windowSituationItem {
      overflow: hidden;
      margin-bottom: px2vh(15px);
      > span {
        width: px2vw(80px);
        float: left;
        font-size: px2vw(18px);
        line-height: px2vh(32px);
        color: #fff;
        display: block;
      }
      > div {
        width: calc(100% - px2vw(80px));
        float: left;
        em {
          display: block;
          height: px2vh(32px);
          line-height: px2vh(32px);
          background: linear-gradient(
            180deg,
            rgba(42, 189, 255, 0.34) 50%,
            rgba(0, 97, 190, 0.34) 100%
          );
          font-size: px2vw(14px);
          color: #fff;
          padding: 0 px2vw(12px);
          margin-left: px2vw(12px);
          margin-bottom: px2vh(12px);
          font-style: normal;
        }
      }
    }
  }
}

.numberText {
  font-family: "ZhengQingKeHuangYouTi";
  font-size: px2vw(30px);
  line-height: px2vh(30px);
  margin-top: px2vh(16px);
  color: #66ffff;

  span {
    font-family: "ZhengQingKeHuangYouTi";
    color: #fff;
  }
}

.windowSituation {
  padding-left: px2vw(15px);

  span {
    width: px2vw(80px);
    float: left;
    font-size: px2vw(18px);
    line-height: px2vh(32px);
    color: #fff;
    display: block;
  }

  em {
    display: block;
    height: px2vh(32px);
    line-height: px2vh(32px);
    background: linear-gradient(
      180deg,
      rgba(42, 189, 255, 0.34) 50%,
      rgba(0, 97, 190, 0.34) 100%
    );
    font-size: px2vw(14px);
    color: #fff;
    padding: 0 px2vw(12px);
    margin-left: px2vw(12px);
    margin-bottom: px2vh(12px);
    font-style: normal;
  }
}

.bigScreenBody {
  background: url("../../../images/bigSrceenBg.png") no-repeat center center;
  background-size: 105% 105%;
  /* 放大背景图片以避免边缘露出 */
  animation: backgroundMove 8s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    alternate;
}

@keyframes backgroundMove {
  0% {
    background-position: center top;
  }

  50% {
    background-position: calc(50% + 20px) top;
  }

  100% {
    background-position: calc(50% - 20px) top;
  }
}

.overviewTitle {
  background: url("../../../images/subTitleBg.png") no-repeat px2vw(34px) center;
  background-size: auto 100%;
  font-size: px2vw(22px);
}

/* 滚动数字 */
.total-number {
  height: px2vh(88px);
  margin-top: 0;
  padding-top: px2vh(20px);
}
#total-number div {
  .innerNumberDiv {
    position: relative;
    width: px2vw(59px);
    height: px2vh(67px);
    font-weight: bold;
    overflow: hidden;
    display: inline-block;
    margin: 0 px2vw(4px);
    .nubmerDiv {
      width: px2vw(59px);
      height: px2vh(67px);
      line-height: px2vh(69px);
      text-align: center;
      font-family: "ZhengQingKeHuangYouTi";
      font-size: px2vw(40px);
      color: #66ffff;
      box-shadow: inset 0px px2vh(10px) px2vh(15px) 0px rgba(0, 97, 191, 0.35),
        inset 0px px2vh(-10px) px2vh(15px) 0px rgba(0, 97, 191, 0.35);
      background: url("../../../images/numberBg.png") no-repeat center center;
      background-size: 100% 100%;
      overflow: hidden;
      span {
        position: relative;
        top: px2vh(5px);
      }
    }
  }
}

.overviewItemText {
  line-height: px2vh(28px);
  font-size: px2vw(14px);
  color: #fff;
  text-align: left;
}

.overviewItemNum {
  line-height: px2vh(28px);
  font-size: px2vh(20px);
  color: #4bc7ff;
  text-align: left;
}

.overviewItemNum span {
  margin-left: px2vh(8px);
  color: #fff;
}

/* 数字滚动动画 */
.number-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  .digit {
    position: relative;
    overflow: hidden;
    .digit-list {
      transition: transform 0.5s ease;
      .digit-item {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/*本月数据统计*/
.quantitativeMain {
  overflow: hidden;
  padding-left: px2vh(37px);
  line-height: px2vh(26px);
  .quantitativeItem {
    float: left;
    width: 50%;
    margin-bottom: px2vh(12px);
    .itemText {
      font-size: px2vw(14px);
      color: #fff;
    }
    .itemNum {
      font-size: px2vw(20px);
      color: #4bc7ff;
      span {
        font-size: px2vw(12px);
        color: #fff;
      }
    }
  }
}
/* 近7日热门服务事项TOP5 */
.topListBox {
  .topItemBox {
    .textBox {
      img {
        width: px2vw(36px);
        height: px2vh(40px);
        display: block;
        position: relative;
        top: px2vh(2px);
      }
      span {
        font-size: px2vw(16px);
        color: #fff;
        margin-left: px2vw(10px);
      }
      em {
        font-size: px2vw(14px);
        color: #fff;
        font-style: normal;
      }
    }
    .processBox {
      width: 100%;
      height: px2vh(4px);
      border-radius: px2vh(4px);
      background: rgba(255, 255, 255, 0.16);
      margin-top: px2vh(5px);
      > div {
        height: px2vh(4px);
        background: linear-gradient(270deg, #d15467 0%, #ec8ca1 100%);
        position: relative;
        border-radius: px2vh(4px);
        transition: all 0.2s;
        &::after {
          content: "";
          display: block;
          width: px2vw(6px);
          height: px2vh(6px);
          background: #ec8ba0;
          box-shadow: 0px 0px 5px 0px #ec8ba0,
            0px 0px 1px 0px rgba(255, 255, 255, 0.5);
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: px2vh(-3px);
          border-radius: 50%;
        }
      }
    }

    &:nth-child(2) {
      .processBox > div {
        background: linear-gradient(270deg, #ed9b44 0%, #f2c07c 100%);
        &::after {
          background: #f2c07b;
          box-shadow: 0px 0px 5px 0px #f2c07b,
            0px 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
      }
    }

    &:nth-child(3) {
      .processBox > div {
        background: linear-gradient(270deg, #77efa4 0%, #befde3 100%);
        &::after {
          background: #befde3;
          box-shadow: 0px 0px 5px 0px #befde3,
            0px 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
      }
    }

    &:nth-child(4) {
      .processBox > div {
        background: linear-gradient(270deg, #77ebfa 0%, #baf7fd 100%);
        &::after {
          background: #baf7fd;
          box-shadow: 0px 0px 5px 0px #baf7fd,
            0px 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
      }
    }

    &:nth-child(5) {
      .processBox > div {
        background: linear-gradient(270deg, #873ef4 0%, #d8aaf9 100%);
        &::after {
          background: #d7aaf9;
          box-shadow: 0px 0px 5px 0px #d7aaf9,
            0px 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
}

/* 本月数据统计 */
.quantitativeBox {
  padding-top: px2vh(10px);

  .quantitativeItem {
    width: 50%;
    float: left;
    margin-top: px2vh(26px);
    //margin-bottom: px2vh(20px);
    padding-left: px2vw(24px);
    box-sizing: border-box;
    &:nth-of-type(5),
    &:nth-of-type(6) {
      margin-bottom: 0;
    }
    img {
      width: px2vw(56px);
      height: px2vh(66px);
      display: block;
      margin-right: px2vw(14px);
    }
    .infoBox {
      .itemText {
        font-size: px2vw(16px);
        color: #fff;
      }
      .itemNum {
        font-size: px2vw(30px);
        color: #92fcfd;
        font-family: "ZhengQingKeHuangYouTi";
        margin-top: px2vh(10px);

        span {
          font-size: px2vw(16px);
          color: #fff;
          margin-left: px2vw(5px);
          font-family: '微软雅黑';
          position: relative;
          top: px2vh(2px);
        }
      }
    }
  }
}
/* 滚动卡片样式 */
.corner-border {
  position: relative;
  .corner-border-top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: px2vw(3px) solid #0082ff;
    border-left: px2vw(3px) solid #0082ff;
  }
  .corner-border-top-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: px2vw(3px) solid #0082ff;
    border-right: px2vw(3px) solid #0082ff;
  }
  .corner-border-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-bottom: px2vw(3px) solid #0082ff;
    border-left: px2vw(3px) solid #0082ff;
  }
  .corner-border-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: px2vw(3px) solid #0082ff;
    border-right: px2vw(3px) solid #0082ff;
  }
}
.scroll-cards-container {
  width: 100%;
  height: px2vh(404px);
  overflow: hidden;
  margin-top: px2vh(20px);
  position: relative;
}

.scroll-cards-wrapper {
  animation: scroll-cards-vertical 30s linear infinite;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.service-card {
  width: calc(25% - px2vw(21px));
  margin-right: px2vw(28px);
  margin-bottom: px2vh(28px);
  border-radius: px2vw(8px);
  padding: px2vh(12px) px2vw(12px) px2vh(6px);
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  position: relative;
  background: #072468;
  -webkit-box-shadow: inset 0 0 px2vw(20px) 0 #0B4893;
          box-shadow: inset 0 0 px2vw(20px) 0 #0B4893;
  &:nth-of-type(4n) {
    margin-right: 0;
  }
}

.card-header {
  font-size: px2vw(14px);
  color: #66ffff;
  font-weight: bold;
  margin-bottom: px2vh(10px);
  padding-bottom: px2vh(8px);
  border-bottom: 1px solid rgba(102, 255, 255, 0.2);
  overflow: hidden;
  .window-number {
    width: px2vw(46px);
    height: px2vh(24px);
    background: #546BEC;
    font-size: px2vw(12px);
    color: #fff;
    border-radius: px2vw(2px);
    text-align: center;
    line-height: px2vh(24px);
    float: left;
  }
  .service-name{
    width: calc(100% - px2vw(120px));
    line-height: px2vh(24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: px2vw(16px);
    color: #fff;
    margin-left: px2vw(10px);
    float: left;
  }
  span {
    display: block;
    width: px2vw(56px);
    height: px2vh(20px);
    font-size: px2vw(12px);
    transform: scale(0.8);
    float: right;
    border: px2vw(1px) solid #C6EED4;
    border-radius: px2vw(4px);
    text-align: center;
    line-height: px2vh(20px);
    color: #C6EED4;
    margin-top: px2vh(2px);

    &.stop {
      color: gray;
    }
  }
}

.card-content {
  margin-bottom: px2vh(8px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  .card-row {
    span {
      display: block;
    }
    .label {
      font-size: px2vw(14px);
      color: #fff;
    }
    .value {
      font-size: px2vw(20px);
      font-family: "ZhengQingKeHuangYouTi";
      color: #FCED5A;
      margin-top: px2vh(10px);

    }
    &:first-of-type {
      .value {
        color: #92FCFD;
      }
    }
    &:nth-of-type(3) {
      .value {
        color: #fff;
      }
    }
  }
}
@keyframes scroll-cards-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.scroll-cards-wrapper:hover {
  animation-play-state: paused;
}
